<template>
  <ContentWrap v-loading="formLoading">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px" v-loading="formLoading">
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属区域" prop="areaName">
            <el-cascader v-model="formData.areaName" :options="categoryList"
              :props="{ value: 'id', label: 'name', children: 'children', checkStrictly: true }" class="w-1/1" clearable
              filterable placeholder="请选择区域" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号类型" prop="userType">
            <el-select v-model="formData.userType" placeholder="请选择账号类型">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.ACCOUNT_TYPE)" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="商家类型" prop="businessType">
            <el-select v-model="formData.businessType" placeholder="请选择商家类型">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MERCHANT_TYPE)" :key="dict.value"
                :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="6">
          <el-form-item label="信用等级" prop="creditName">
            <el-select v-model="formData.creditName" placeholder="请选择商家信用等级">
              <el-option v-for="dict in creditOption" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="formData.companyName" placeholder="请输入公司名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司地址" prop="companyAddress">
            <el-input v-model="formData.companyAddress" placeholder="请输入公司地址" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="收货地址" prop="receiveAddress">
            <el-input v-model="formData.receiveAddress" placeholder="请输入收货地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发货地址" prop="deliveryAddress">
            <el-input v-model="formData.deliveryAddress" placeholder="请输入发货地址" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="8">
          <el-form-item label="营业执照" prop="companyImage">
            <UploadImg v-model="formData.companyImage" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证正面" prop="cardImage">
            <UploadImg v-model="formData.cardImage" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证背面" prop="cardBackImage">
            <UploadImg v-model="formData.cardBackImage" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证带店面(形象墙)" prop="liveImage">
            <UploadImg v-model="formData.liveImage" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="食品(酒类)流通许可证" prop="licenseImage">
            <UploadImg v-model="formData.licenseImage" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="可发布供应条数" prop="supplyNum">
            <el-input-number v-model="formData.supplyNum" :min="-1" placeholder="请输入可发布供应条数" />
            <span style="font-size:12px;margin-left:10px;color: #FAAD14;">* -1：表示不限制发布供应条数</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可发布求购条数" prop="buyNum">
            <el-input-number v-model="formData.buyNum" :min="-1" placeholder="请输入可发布求购条数" />
            <span style="font-size:12px;margin-left:10px;color: #FAAD14;">* -1：表示不限制可发布求购条数</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="可发布投诉条数" prop="complainNum">
            <el-input-number v-model="formData.complainNum" :min="-1" placeholder="请输入可发布投诉条数" />
            <span style="font-size:12px;margin-left:10px;color: #FAAD14;">* -1：表示不限制可发布投诉条数</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可发布离职通告条数" prop="leaveNum">
            <el-input-number v-model="formData.leaveNum" :min="-1" placeholder="请输入可发布离职通告条数" />
            <span style="font-size:12px;margin-left:10px;color: #FAAD14;">* -1：表示不限制可发布离职通告条数</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <!-- <el-col :span="12">
          <el-form-item label="是否开启相关功能" prop="isOpen">
            <el-radio-group v-model="formData.isOpen">
              <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.IS_NO)" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="是否平台自营" prop="isOpen">
            <el-radio-group v-model="formData.isSelfSupport">
              <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.IS_NO)" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">

          <el-form-item label="商家状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.MERCHANT_STATUS)" :key="dict.value"
                :label="dict.value"> {{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="商家认证" prop="isAuth">
            <el-radio-group v-model="formData.isAuth">
              <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.MERCHANT_CERTIFICATION)" :key="dict.value"
                :label="dict.value"> {{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="认证时间" prop="authTime">
            <el-date-picker v-model="formData.authTime" type="date" value-format="x" placeholder="选择认证时间" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效时间" prop="overTime">
            <el-date-picker v-model="formData.overTime" type="date" value-format="x" placeholder="选择有效时间" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form>
      <el-form-item style="float: right">
        <el-button :loading="formLoading" type="primary" @click="submitForm">
          保存
        </el-button>
        <el-button @click="close">返回</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>

<script setup lang="ts">
import { BusinessUserApi, BusinessUserVO } from '@/api/wine/businessuser'
import { useTagsViewStore } from '@/store/modules/tagsView'
// import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
// import { defaultProps } from '@/utils/tree'

defineOptions({ name: 'BusinessUserForm' })
const { delView } = useTagsViewStore() // 视图操作
const { push, currentRoute } = useRouter() // 路由

const { params } = useRoute() // 查询参数
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  businessType: undefined,
  areaId: undefined,
  parentId: undefined,
  userId: undefined,
  userType: undefined,
  creditId: undefined,
  companyName: undefined,
  companyAddress: undefined,
  companyImage: undefined,
  cardImage: undefined,
  cardBackImage: undefined,
  creditName: 1,
  areaName: undefined,
  liveImage: undefined,
  licenseImage: undefined,
  receiveAddress: undefined,
  deliveryAddress: undefined,
  supplyNum: -1,
  buyNum: -1,
  complainNum: -1,
  leaveNum: -1,
  status: 0,
  isAuth: 0,
  isOpen: 1,
  isSelfSupport: 0,
  authTime: undefined,
  overTime: undefined
})
const formRules = reactive({
  supplyNum: [{ required: true, message: '可发布供应条数不能为空', trigger: 'blur' }],
  companyName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
  companyAddress: [{ required: true, message: '公司地址不能为空', trigger: 'blur' }],
  businessType: [{ required: true, message: '请选择商家类型', trigger: 'change' }],
  buyNum: [{ required: true, message: '可发布求购条数不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref


const id = params.id as unknown as number
console.log("id", id);

/** 打开弹窗 */
const getDetail = async () => {
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await BusinessUserApi.getBusinessUser(id)
      formData.value.areaName = formData.value.areaId
      if (formData.value.creditName == null) {
        formData.value.creditName = 1;
      }
    } finally {
      formLoading.value = false
    }
  }
}
const categoryList = ref()
const creditOption = ref<ListItem[]>([])
const initCreditOption = async () => {
  const data = await BusinessUserApi.getCreditList({})
  creditOption.value = []
  data.map((item) => {
    creditOption.value.push({
      label: item.name,
      value: item.id
    })
  })
}

onMounted(async () => {
  await getDetail()
  await initCreditOption()
  const data = await BusinessUserApi.getCategoryList({})
  categoryList.value = data
})



const close = () => {
  delView(unref(currentRoute))
  push({ name: 'BusinessUser' })
}
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as BusinessUserVO
    if (!id) {
      await BusinessUserApi.createBusinessUser(data)
      message.success(t('common.createSuccess'))
    } else {
      await BusinessUserApi.updateBusinessUser(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    close()
    // 发送操作成功的事件
  } finally {
    formLoading.value = false
  }
}

</script>
